/**
 * @Author: Your name
 * @Date:   2024-03-15 16:19:41
 * @Last Modified by:   Your name
 * @Last Modified time: 2024-03-15 16:32:06
 */
import React, { Component } from 'react';

class ContactList extends Component {
  render() {
    const contacts = [
      {
        id: 1,
        name: 'Contact 1',
        avatar: '/avatars/avatar1.png',
        lastMessage: 'Hello!',
        lastActive: '3 minutes ago',
        chatEndTime: '15:30',
      },
      {
        id: 2,
        name: 'Contact 2',
        avatar: '/avatars/avatar2.png',
        lastMessage: 'How are you?',
        lastActive: '1 hour ago',
        chatEndTime: '16:45',
      },
      {
        id: 3,
        name: 'Contact 3',
        avatar: '/avatars/avatar3.png',
        lastMessage: 'Nice to meet you!',
        lastActive: '1 day ago',
        chatEndTime: 'Yesterday',
      },
    ];

    return (
      <div className="h-full overflow-auto">
        <ul className="w-full">
          {contacts.map((contact) => (
            <li
              key={contact.id}
              className="flex items-center p-4 border-b hover:bg-gray-100 cursor-pointer"
            >
              <img
                src={contact.avatar}
                alt={contact.name}
                className="w-8 h-8 rounded-full mr-4"
              />
              <div>
                <p className="font-semibold">{contact.name}</p>
                <p className="text-sm text-gray-500">{contact.lastMessage}</p>
                <p className="text-sm text-gray-500">{contact.chatEndTime}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ContactList;
